<template>
 <div>
  <!-- 登陆页面 -->
  <Top></Top>
  <Header></Header>
    <el-row type="flex" justify="center" >
      <el-col :span="8" >
        <el-input placeholder="账号" v-model="user.account"></el-input>
        <el-input placeholder="密码" v-model="user.password"></el-input>
       
        <el-row type="flex" justify="center">
          <el-button type="info" @click="register">注册</el-button>
          <el-button type="success" @click="login">登录</el-button>
        </el-row>     
      </el-col>
    </el-row>  
  <Footer></Footer>
</div> 

</template>
<script>
//1. 可以通过import导入组件--相对路径
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Footer from './commons/foot.vue'
export default {
  
  data(){
    return{
      // 用户信息
      user:{
        account:"",
        password:""
      }
    }
  },
  components:{
    Top,Header,Footer
  },
  methods:{
    login(){
      this.$axios.post("/user/login",this.user).then(res =>{
          if(res.data.code == 200){ //响应成功
            //将用户信息存放在localStorage中
            window.localStorage.setItem("user",JSON.stringify(res.data.data))  
            this.$router.push("/") 
          }else{
            this.$message.error(res.data.message)
          }
      })
    },
    register(){
      //注册用户--默认是消费者
    }
  },
  mounted(){//页面挂载时执行
  
  }
  
  
}
</script>
<style scoped>
  
</style>
